<template>
    <view class="container">
        <!-- 加载状态遮罩 -->
        <view class="loading-overlay" v-if="isLoading">
            <view class="loading-spinner"></view>
            <text class="loading-text">{{ loadingText }}</text>
        </view>

        <!-- 顶部导航栏 -->
        <NavBar :showBack="true" :userName="userName" :isLoggedIn="!!userName" title="重要时刻" />

        <!-- 搜索栏 -->
        <view class="search-bar">
            <input type="text" v-model="searchQuery" placeholder="搜索重要时刻" class="search-input" />
            <view class="sort-button" @click="toggleSortOrder">
                <text>{{ sortOrder === 'asc' ? '时间升序' : '时间降序' }}</text>
            </view>
        </view>

        <!-- 时间轴视图 -->
        <scroll-view class="timeline-container" scroll-y>
            <view v-for="(moment, index) in filteredMoments" :key="index" class="timeline-item"
                :class="{ 'active': selectedMomentIndex === index }" @click="selectMoment(index)">
                <view class="timeline-dot"></view>
                <view class="timeline-content">
                    <view class="moment-header">
                        <text class="moment-date">{{ moment.date }}</text>
                        <view class="moment-actions">
                            <text class="edit-button" @click.stop="editMoment(index)">编辑</text>
                            <text class="delete-button" @click.stop="deleteMoment(index)">删除</text>
                        </view>
                    </view>
                    <text class="moment-title">{{ moment.title }}</text>
                    <text class="moment-description">{{ moment.description }}</text>
                    <image v-if="moment.image" :src="moment.image" mode="aspectFill" class="moment-image"
                        @click.stop="previewImage(moment.image)"></image>
                </view>
            </view>
        </scroll-view>

        <!-- 添加按钮 -->
        <view class="add-button" @click="showMomentForm(null)">
            <text class="add-icon">+</text>
        </view>

        <!-- 编辑弹窗 -->
        <view class="modal" v-if="showModal">
            <view class="modal-content">
                <view class="modal-header">
                    <text class="modal-title">{{ isEditing ? '编辑时刻' : '添加时刻' }}</text>
                    <text class="close-button" @click="closeModal">×</text>
                </view>
                <view class="form-content">
                    <view class="form-item">
                        <text class="form-label">日期</text>
                        <input type="text" v-model="currentMoment.date" placeholder="请输入日期" class="form-input" />
                    </view>
                    <view class="form-item">
                        <text class="form-label">标题</text>
                        <input type="text" v-model="currentMoment.title" placeholder="请输入标题" class="form-input" />
                    </view>
                    <view class="form-item">
                        <text class="form-label">描述</text>
                        <textarea v-model="currentMoment.description" placeholder="请输入描述" class="form-textarea" />
                    </view>
                    <view class="form-item">
                        <text class="form-label">图片</text>
                        <view class="image-upload" @click="chooseImage">
                            <image v-if="currentMoment.image" :src="currentMoment.image" mode="aspectFill"
                                class="preview-image"></image>
                            <view v-else class="upload-placeholder">
                                <text class="upload-icon">+</text>
                                <text class="upload-text">添加图片</text>
                            </view>
                        </view>
                    </view>
                    <button class="submit-button" @click="saveMoment">保存</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue';

export default {
    components: {
        NavBar
    },
    data() {
        return {
            moments: [],
            searchQuery: '',
            sortOrder: 'desc',
            selectedMomentIndex: -1,
            showModal: false,
            isEditing: false,
            editIndex: -1,
            currentMoment: {
                date: '',
                title: '',
                description: '',
                image: ''
            },
            isLoading: false,
            loadingText: '加载中...'
        }
    },
    computed: {
        filteredMoments() {
            let result = [...this.moments];

            // 搜索过滤
            if (this.searchQuery) {
                result = result.filter(moment =>
                    moment.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
                    moment.description.toLowerCase().includes(this.searchQuery.toLowerCase())
                );
            }

            // 排序
            result.sort((a, b) => {
                const dateA = new Date(a.date);
                const dateB = new Date(b.date);
                return this.sortOrder === 'asc' ? dateA - dateB : dateB - dateA;
            });

            return result;
        }
    },
    // onLoad() {
    // },
    onLoad() {
        this.loadMoments();

        // 从本地存储获取用户信息
        const userInfo = uni.getStorageSync('userInfo');
        if (userInfo && userInfo.isLoggedIn) {
            this.userName = userInfo.userName;
        }

        // 模拟加载其他信息
        setTimeout(() => {
            this.storyCount = 5;
            this.isLoading = false;
        }, 800);
    },
    methods: {
        loadMoments() {
            // 模拟加载数据
            this.isLoading = true;
            setTimeout(() => {
                this.moments = [
                    {
                        date: '2023-01-01',
                        title: '新年愿望',
                        description: '希望在新的一年里能够...',
                        image: '/static/avatar-default1.png'
                    },
                    {
                        date: '2023-06-15',
                        title: '毕业典礼',
                        description: '终于毕业了，未来充满希望...',
                        image: '/static/avatar-default2.png'
                    }
                ];
                this.isLoading = false;
            }, 1000);
        },
        toggleSortOrder() {
            this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
        },
        selectMoment(index) {
            this.selectedMomentIndex = index;
        },
        showMomentForm(index) {
            this.isEditing = index !== null;
            this.editIndex = index;
            if (this.isEditing) {
                this.currentMoment = { ...this.moments[index] };
            } else {
                this.currentMoment = {
                    date: '',
                    title: '',
                    description: '',
                    image: ''
                };
            }
            this.showModal = true;
        },
        editMoment(index) {
            this.showMomentForm(index);
        },
        closeModal() {
            this.showModal = false;
            this.currentMoment = {
                date: '',
                title: '',
                description: '',
                image: ''
            };
        },
        async chooseImage() {
            try {
                const res = await uni.chooseImage({
                    count: 1,
                    sizeType: ['compressed'],
                    sourceType: ['album', 'camera']
                });
                this.currentMoment.image = res.tempFilePaths[0];
            } catch (e) {
                uni.showToast({
                    title: '选择图片失败',
                    icon: 'none'
                });
            }
        },
        previewImage(url) {
            uni.previewImage({
                urls: [url],
                current: url
            });
        },
        saveMoment() {
            if (!this.currentMoment.date || !this.currentMoment.title) {
                uni.showToast({
                    title: '请填写日期和标题',
                    icon: 'none'
                });
                return;
            }

            if (this.isEditing) {
                this.moments[this.editIndex] = { ...this.currentMoment };
            } else {
                this.moments.push({ ...this.currentMoment });
            }

            this.closeModal();
            uni.showToast({
                title: this.isEditing ? '修改成功' : '添加成功',
                icon: 'success'
            });
        },
        deleteMoment(index) {
            uni.showModal({
                title: '提示',
                content: '确定要删除这个时刻吗？',
                success: (res) => {
                    if (res.confirm) {
                        this.moments.splice(index, 1);
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success'
                        });
                    }
                }
            });
        }
    }
}
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
}

/* 加载状态样式 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.loading-spinner {
    width: 80rpx;
    height: 80rpx;
    border: 6rpx solid #e8f5e9;
    border-top: 6rpx solid #44b79b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #666;
}

/* 搜索栏样式 */
.search-bar {
    padding: 20rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.search-input {
    flex: 1;
    height: 70rpx;
    background-color: #f5f5f5;
    border-radius: 35rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
}

.sort-button {
    margin-left: 20rpx;
    padding: 0 30rpx;
    height: 70rpx;
    line-height: 70rpx;
    background-color: #44b79b;
    color: #fff;
    border-radius: 35rpx;
    font-size: 28rpx;
}

/* 时间轴样式 */
.timeline-container {
    flex: 1;
    padding: 30rpx;
    overflow-y: auto;
}

.timeline-item {
    position: relative;
    padding-left: 40rpx;
    margin-bottom: 40rpx;
    transition: all 0.3s ease;
}

.timeline-dot {
    position: absolute;
    left: 0;
    top: 30rpx;
    width: 20rpx;
    height: 20rpx;
    background-color: #44b79b;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 9rpx;
    top: 50rpx;
    width: 2rpx;
    height: calc(100% + 20rpx);
    background-color: #e0e0e0;
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-content {
    background-color: #fff;
    border-radius: 15rpx;
    padding: 30rpx;
    width: 80vw;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.moment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rpx;
}

.moment-date {
    font-size: 24rpx;
    color: #999;
}

.moment-actions {
    display: flex;
    gap: 20rpx;
}

.edit-button,
.delete-button {
    font-size: 24rpx;
    color: #44b79b;
}

.delete-button {
    color: #ff4d4f;
}

.moment-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
    display: block;
}

.moment-description {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15rpx;
    display: block;
}

.moment-image {
    width: 100%;
    height: 300rpx;
    border-radius: 10rpx;
}

/* 添加按钮样式 */
.add-button {
    position: fixed;
    right: 40rpx;
    bottom: 40rpx;
    width: 100rpx;
    height: 100rpx;
    background-color: #44b79b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4rpx 20rpx rgba(68, 183, 155, 0.4);
    transition: all 0.3s ease;
}

.add-icon {
    color: #fff;
    font-size: 60rpx;
    font-weight: lighter;
}

/* 弹窗样式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    width: 90%;
    max-height: 90vh;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
}

.modal-header {
    padding: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #f0f0f0;
}

.modal-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
}

.close-button {
    font-size: 40rpx;
    color: #999;
    padding: 0 20rpx;
}

.form-content {
    padding: 30rpx;
}

.form-item {
    margin-bottom: 30rpx;
}

.form-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 15rpx;
    display: block;
}

.form-input {
    width: 100%;
    height: 80rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
}

.form-textarea {
    width: 100%;
    height: 200rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    padding: 20rpx;
    font-size: 28rpx;
}

.image-upload {
    width: 100%;
    height: 300rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.preview-image {
    width: 100%;
    height: 100%;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;
}

.upload-icon {
    font-size: 60rpx;
    margin-bottom: 10rpx;
}

.upload-text {
    font-size: 28rpx;
}

.submit-button {
    width: 100%;
    height: 88rpx;
    background-color: #44b79b;
    color: #fff;
    border-radius: 44rpx;
    font-size: 32rpx;
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 激活状态样式 */
.timeline-item.active .timeline-dot {
    width: 24rpx;
    height: 24rpx;
    background-color: #44b79b;
    border: 4rpx solid #e8f5e9;
    left: -2rpx;
}

.timeline-item.active .timeline-content {
    transform: translateX(10rpx);
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
}
</style>